﻿@{
Layout = null;
}

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>用户注册</title>
    <style>
        .error {
            color: red;
        }
    </style>
    <script src="~/Scripts/jquery-3.7.1.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script>
        //添加自定义校验 addMethod：name, method, message
        jQuery.validator.addMethod("zzbdsyz", function (value, element, param) {
            var reg = new RegExp(param);
            return reg.test(value);
        }, "身份证号码有误！");

        $(function () {
            //使用jquery的验证
            $("#form1").validate({
                rules: {
                    name: { required: true, email: true },
                    sfz: {
                        required: true,
                        zzbdsyz: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                    },
                    age:{
                        required: true,
                        min:1,
                        max:120
                    },
                    pwd1: { required: true },
                    pwd2: {
                        required: true,
                        equalTo: "#pwd1"
                    }
                },
                messages: {
                    name: { required: "姓名不能为空！", email: "邮箱格式不正确" },
                    sfz:{required: "身份证号不能为空！"},
                    age:{
                        required: "年龄不能为空！",
                        min:"年龄不能小于1",
                        max:"年龄不能大于120"
                    },
                    pwd1: { required: "密码不能为空！" },
                    pwd2: {
                        required: "确认密码不能为空！",
                        equalTo: "两次密码不一致！"
                    }
                }
            });

            //自己写的
            //$('#form1').bind("submit", function () {
            //    var name = $('#name').val();
            //    var pwd1 = $('#pwd1').val();
            //    var pwd2 = $('#pwd2').val();
            //    if (name == "") {
            //        $('#span1').text("姓名不能为空！");
            //        return false;
            //    }
            //    else {
            //        $('#span1').text("");
            //    }
            //    if (pwd1 == "") {
            //        $('#span2').text("密码不能为空！");
            //        return false;
            //    }
            //    else {
            //        $('#span2').text("");
            //    }
            //    if (pwd1 != pwd2) {
            //        $('#span3').text("两次密码不一致！");
            //        return false;
            //    }
            //    else {
            //        $('#span3').text("");
            //    }
            //    return true;
            //});
        });
    </script>
</head>

<body>
    <div>
        <form id="form1" action="/Register/Register" method="post">
            <fieldset>
                <legend>注册</legend>
                <p>姓名：<input id="name" type="text" name="name"><span id="span1"></span></p>
                <p>身份证号：<input id="sfz" type="text" name="sfz"></p>
                <p>年龄：<input type="number" name="age" value="" /></p>
                <p>密码：<input id="pwd1" type="text" name="pwd1"><span id="span2"></span></p>
                <p>确认密码：<input id="pwd2" type="text" name="pwd2"><span id="span3"></span></p>
                <p><input type="submit" value="提交"></p>
            </fieldset>
        </form>
    </div>
</body>

</html>